<template>
	<view class="change-phone-one public345">
		<!-- 提示 -->
		<view class="change-phone-top">
			<text>绑定新手机号</text>

			<!-- 进度 -->
			<text>2 <text style="opacity: .4;">/2</text> </text>
		</view>

		<!-- 手机号 -->
		<view class="phone-box">
			<text class="tip">手机号</text>
			<input type="text" class="ipt" maxlength="11" v-model="phone" placeholder="请输入手机号码"
				placeholder-style="color:#D0D0D0">
		</view>

		<!-- 验证码 -->
		<view class="phone-box">
			<text class="tip">验证码</text>
			<input type="text" class="ipt" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#D0D0D0"
				v-model="num">
			<view class="get-num">
				<text class="get-num-time" v-if="timeMin <= 60 && timeMin > 0">{{timeMin}}秒</text>
				<text v-else @click="getNum">获取验证码</text>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="confirm-btn" @click="nextStep">
			确认更换
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机号
				phone: '',
				// 验证码
				num: '',
				// 验证码 定时器
				timeMin: 61,
				timer: null
			}
		},
		methods: {
			// 获取验证码
			getNum() {
				// 每次点击之前 不存在定时器 则开启定时器
				if (!this.timer) {
					this.openSetInterval()
				}
			},
			// 打开定时器
			openSetInterval() {
				this.timeMin = 60
				this.timer = setInterval(() => {
					this.timeMin--
					// 倒计时为0时 清除定时器
					if (this.timeMin === 0) {
						this.closeSetInterval()
					}
				}, 1000)
			},
			// 关闭定时器
			closeSetInterval() {
				clearInterval(this.timer)
				this.timer = null
				this.timeMin = 61
			},

			// 下一步
			nextStep() {
				if (this.phone.length === 11 && this.num.length === 6) {
					uni.switchTab({
						url: '/pages/tabbar/mycenter/mycenter'
					})
				}
			}
		},
		onUnload() {
			// 离开页面 清除定时器
			if (this.timer) {
				this.closeSetInterval()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	// 更换手机号
	.change-phone-one {
		font-size: 26rpx;

		// 更换手机号进度
		.change-phone-top {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			// margin: 20rpx 0;
			padding: 20rpx 0;
		}

		// 输入框盒子
		.phone-box {
			display: flex;
			padding: 26rpx 0;

			.tip {
				display: inline-block;
				width: 140rpx;
				color: #333;
			}

			.ipt {
				width: 320rpx;
				font-size: 26rpx;
			}

			// 获取验证码
			.get-num {
				width: 220rpx;
				font-weight: 500;
				color: #FF7803;
				text-align: right;

				.get-num-time {
					margin-left: 20rpx;
				}
			}
		}

		// 确认按钮
		.confirm-btn {
			width: 690rpx;
			margin-top: 30rpx;
			border-radius: 44rpx;
			background: #FF7803;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}
</style>
